import DoubanCardList from '@/pages/Search/components/DoubanCardList';
import { movieComingSoonUsingPOST } from '@/services/otherworldly-station-backend/DoubanController';
import { PageContainer } from '@ant-design/pro-components';
import {Col, Row, Skeleton, Spin} from 'antd';
import React, { useEffect, useState } from 'react';

// 即将上映
const ComingSoon: React.FC = () => {
    const [cardCount, setCardCount] = useState<number>(0);
    const [pageSize, setPageSize] = useState<number>(0);
    const [loading, setLoading] = useState<boolean>(false);
    const [cardRecords, setCardRecords] = useState<API.DoubanSearchMovieVO[]>([]);

    useEffect(() => {
        loadingData(0, 50);
    }, []);

    // 获取用户信息
    const loadingData = async (start: number, count: number) => {
        setLoading(true);
        return movieComingSoonUsingPOST({ start, count }).then((res) => {
            if (res.code === 0) {
                const { data } = res;
                setPageSize(50);
                setCardRecords(data?.records || []);
                setCardCount(data?.total || 0);
                setLoading(false);
            }
        });
    };

    return (
        <PageContainer>
            <Spin spinning={loading}>
                <Row gutter={24}>
                    <Col span={24}>
                        <DoubanCardList
                            records={cardRecords}
                            setDoubanPage={() => {}}
                            doubanPage={1}
                            doubanPageSize={pageSize}
                            recordsCount={cardCount}
                            searchKey={''}
                            onSearchData={async (count, start) => {
                                await loadingData(start / count, count);
                            }}
                        />
                    </Col>
                </Row>
            </Spin>
        </PageContainer>
    );
};

export default ComingSoon;
